<div class="ui-widget-content">
<table class="personal-header ui-widget-content" border="1" cellspacing="0" cellpadding="0">
	<thead class="ui-state-highlight">
		<th style="width:23%">Skill level A</th>
		<th style="width:23%">Skill level B</th>
		<th style="width:23%">Skill level C</th>
		<th style="width:10%">Target</th>
		<th>Actual</th>
		<th style="width:10%">Gap</th>
	</thead>
</table>
<div class="wrapper-personal-profile">
<table class="personal-profile ui-widget-content" border="1" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td class="level-a">Managerial</td>
			<td class="level-b">Team Management</td>
			<td class="level-c">Planning</td>
			<td class="target">3</td>
			<td>
				<select class="actual">
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</td>
			<td class="gap"></td>
		</tr>
		<tr>
			<td class="level-a">Managerial</td>
			<td class="level-b">Team Management</td>
			<td class="level-c">Meeting Management</td>
			<td class="target">3</td>
			<td>
				<select class="actual">
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select></td>
			<td class="gap"></td>
		</tr>
		<tr>
			<td class="level-a">Managerial</td>
			<td class="level-b">Team Management</td>
			<td class="level-c">Decision Making</td>
			<td class="target">3</td>
			<td>
				<select class="actual">
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</td>
			<td class="gap"></td>
		</tr>
	</tbody>
</table>
</div>
</div>
<script type="text/javascript">
	//set up table
	$(function(){
		function groupTable($rows, startIndex, total){
			if(total === 0){
				return;
			}
			var i, currentIndex = startIndex, count = 1, lst=[];
			var tds= $rows.find('td:eq('+currentIndex+')');
			var ctrl = $(tds[0]);
			lst.push($rows[0]);

			for(i = 1; i<=tds.length; i++){
				if(ctrl.text() == $(tds[i]).text()){
					count++;
					$(tds[i]).addClass('deleted');
					lst.push($rows[i]);
				}
				else{
					if(count>1){
						ctrl.attr('rowspan', count);
						groupTable($(lst), startIndex+1, total-1)
					}
					count = 1;
					lst = [];
					ctrl = $(tds[i]);
					lst.push($rows[i]);
				}
			}
		}
		groupTable($('.personal-profile tr:has(td)'),0,3);
		$('.personal-profile .deleted').remove();
	});

	//set up gap
	$(".gap").each(function(){
		var target = parseInt($(this).prev().prev().text());
		var actual = parseInt($(this).prev().children(".actual").val());
		var gap = parseInt($(this).text(target-actual));
		if(gap>0)
		{
			$(this).css("background-color","green");
		}
		else
		{
			$(this).css("background-color","red");
		}
	});

	//calculate gap
	$(".actual").change(function(){
		var actual = parseInt($(this).val());
		var target = parseInt($(this).parent('td').prev('.target').text());
		var gap = target - actual;
		if(gap>0)
		{
			$(this).parent('td').next('.gap').text(gap);
			$(this).parent('td').next('.gap').css("background-color","red");
		}
		else
		{
			$(this).parent('td').next('.gap').text(gap);
			$(this).parent('td').next('.gap').css("background-color","green");
		}
	});
</script>